<script setup>
import { ref ,onMounted , onUpdated } from 'vue'
let props=defineProps(['cardData'])
onMounted(()=>{
    cardData.value=props.cardData
})
onUpdated (()=>{
    cardData.value=props.cardData
})
const cardData=ref({
    id:"",
    title:"",
    content:"",
    status:"",
    opinion:"",
    reflectDate:"",
    feebackDate:"",
    organizerId:"",
    organizerName:"",
    receiverId:"",
    receiverName:""
}
)
</script>
<template>
    <div class="car">
        <div class="sender">
            <h2>{{ cardData.organizerName }}</h2>
        </div>
        <div class="body">
            <div class="title">
                <p>{{ cardData.title }}</p>
            </div>
            <div class="content">
                <p>{{cardData.content.length > 63 ? cardData.content.substring(0, 62) + '...' : cardData.content}}</p>
            </div>
        </div>
        <div class="details">
            <p>邮件详情</p>
            <p>></p>
        </div>
    </div>
</template>
<style scoped>
.car{
    /* width: calc((100% - 70px) / 2); */
    height: 100%;
    box-shadow: 0 0 5px 0 rgb(0, 0, 0,0.2);
    padding: 0 5px;
    cursor: pointer;
}
.car:active{
    translate: 2px 2px;
}
.body{
    border-bottom: 1px solid rgb(227, 227, 227);
    overflow: hidden;
}
.title p{
    color: rgb(40, 40, 40);
}
.sender h2{
    color: rgb(40, 40, 40);
}
.details p{
    font-size: 12px;
    color: rgb(40, 40, 40);
}
.sender{
    height: 19%;
    display: flex;
    align-items: center;
}
.body{
    height: 63%;
}
.details{
    height: 18%;
    display: flex;
    align-items: center;
    gap: 5px;
}
</style>